<template>
    <div>
        <el-divider content-position='left'>
            <el-popover
                ref='popover'
                placement="bottom-start"
                width="500"
                trigger="click"
                @hide='resetPopover'>
                <el-form label-width="120px" :model='createForm' :rules="createFormRules" ref='createFrom'>
                    <el-form-item label='登录账户' prop='username'>
                        <el-input v-model='createForm.username'></el-input>
                    </el-form-item>
                    <el-form-item label='登录密码' prop='password'>
                        <el-input v-model='createForm.password'></el-input>
                    </el-form-item>
                    <el-form-item label='账户昵称' prop='manager_name'>
                        <el-input v-model='createForm.manager_name'></el-input>
                    </el-form-item>
                    <el-form-item label='账户角色' prop='roles'>
                        <o-select v-model='createForm.roles' code='roles' multiple className='w100' select-type='common'></o-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type='primary' @click='createConfirm'>确认</el-button>
                    </el-form-item>
                </el-form>
                <el-button type='primary' slot='reference' @click='createConfirm'>添加系统用户</el-button>
            </el-popover>
        </el-divider>
        <el-table
            :data="tableData"
            stripe
            border
            :header-cell-style="TABLE_HEADER_CELL_STYLE"
            v-loading = "isLoading">
            <el-table-column prop='title' label='登录账户'>
                <template v-slot='scope'>
                    <edit-table-column v-model='scope.row' edit-key='username' @change='updateHandle(scope.row)'></edit-table-column>
                </template>
            </el-table-column>
            <el-table-column prop='role_names' label='用户角色'>
                <template v-slot='scope'>
                    <template v-if="scope.row.role_names.length">
                        <edit-table-column v-model='scope.row' edit-type='select' edit-key='roles' code='roles' multiple @change='updateHandle(scope.row)'>
                            <template slot='content'>
                                <span v-for='(item, index) in scope.row.role_names' :key='index'>{{item}}、</span>
                            </template>
                        </edit-table-column>
                    </template>
                </template>
            </el-table-column>
            <el-table-column prop='created_at' label='创建时间'></el-table-column>
            <el-table-column prop='created_at' label='最后登录时间'>
                <template v-slot='scope'>
                    {{scope.row.login_at ? scope.row.login_at : '账户未登录过系统'}}
                </template>
            </el-table-column>
            <el-table-column prop='status' label='状态'>
                <template v-slot='scope'>
                    <el-switch v-model='scope.row.status' @change='updateHandle(scope.row)'></el-switch>
                </template>
            </el-table-column>
            <el-table-column label='操作'>
                <template v-slot='scope'>
                    <el-popconfirm title="确认删除吗？" @confirm='deleteHandle(scope.row)' class="popconfirm">
                        <el-button type='text' slot="reference">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import {toast, formCheck} from '@u'
    import {MISS_REQUIRE_FORM_MESSAGE} from '@const';

    export default {
        data () {
            return {
                tableData : [],
                queryForm : {
                    page : 1,
                    limit : 100
                },
                total : 0,
                history : [0],//查看下级菜单的历史
                isLoading : false,
                createForm : {
                    username : null, //账户
                    password : null, //密码
                    manager_name : null,  //昵称
                    roles : [], //角色
                },
                createFormRules : {
                    username : [{required: true, message : MISS_REQUIRE_FORM_MESSAGE}],
                    password : [{required: true, message : MISS_REQUIRE_FORM_MESSAGE}],
                    manager_name : [{required: true, message : MISS_REQUIRE_FORM_MESSAGE}],
                    roles : [{required: true, message : MISS_REQUIRE_FORM_MESSAGE}]
                }
            }
        },
        created () {
            this.getTableData();
        },
        methods : {
            getTableData () {
                this.isLoading = true;
                this.__api.system.usersList(this.queryForm).then(res => {
                    this.isLoading = false;
                    this.total = res.total;
                    this.tableData = res.data;
                })
            },
            //删除
            deleteHandle (row) {
                this.__api.system.usersDelete({
                    id : row.id
                }).then(_ => {
                    toast('操作成功');
                    this.getTableData();
                })
            },
            //更新
            updateHandle (row) {
                this.$nextTick(_ => {
                    this.__api.system.usersUpdate(row).then(_ => {
                        toast('操作成功')
                    })
                })
            },
            //创建确认
            createConfirm () {
                formCheck(this.$refs.createFrom).then(_ => {
                    this.__api.system.usersCreate(this.createForm).then(_ => {
                        toast('操作成功');
                        this.$refs.popover.doClose();
                        this.getTableData();
                        this.resetPopover();
                    })
                })
            },
            //重置相关数据
            resetPopover () {
                this.createForm = {
                    username : null, //账户
                    password : null, //密码
                    manager_name : null,  //昵称
                    roles : [], //角色
                }
            }
        }
    }
</script>

<style>

</style>